var gRadius = 10;
var gMargin = gRadius;
var gFontSize = 12;
var gFont = "sans";
var gLineSpacing = .5;


var gCanvasId;
var gThreadWidth;
var gBubbleWidth = 300;
var gCanvasWidth;
var gCanvasHeight;
var gBubbleXpos;
var gBubbleYpos;

var gBubbleYMargin = 20;

function initCanvas (x, y, bubbleWidth, threadWidth, canvasWidth, canvasHeight, canvasId) 
{
    gCanvasId = canvasId;
    gBubbleWidth = bubbleWidth;
    gThreadWidth = threadWidth;
    gCanvasWidth = canvasWidth;
    gCanvasHeight = canvasHeight;
    gBubbleXpos = x;
    gBubbleYpos = y;
}


function resizeCanvas (width, height)
{
    var canvas = document.getElementById(gCanvasId);
    canvas.style.width = width;
    canvas.style.height = height;
}

function drawBubble (align, text)
{
    var canvas = document.getElementById(gCanvasId);
    var context = canvas.getContext("2d");

    CanvasTextFunctions.enable(context);

    var h = gRadius * 2 + gFontSize;

    var words = text.split(" ");
    var currentText = "";

    var startPos = 0;
    var lineNum = 0;
    var maxWidth = 0;

    for (var i = 0; i < words.length; i++)
	{
	    currentText += (i == startPos? "":" ") + words[i];
	    var width = context.measureText(gFont, gFontSize, currentText) + 2 * gMargin;

	    if (width > gBubbleWidth) {
		var line = "";
		for (var j = startPos; j < i; j++) 
		    line += (j == startPos ? "":" ") + words[j];

		var myWidth = context.measureText(gFont, gFontSize, line);

		var xPos = align == 1 ? gBubbleXpos + gMargin : gBubbleXpos +gThreadWidth - myWidth - gMargin;
		var yPos = gBubbleYpos + gLineSpacing * gFontSize * lineNum + gFontSize * (lineNum + 1) + gMargin;

		context.drawText(gFont, gFontSize, xPos, yPos, line);

		maxWidth = (maxWidth > myWidth) ? maxWidth : myWidth;
		startPos = i;
		currentText = words[i];
		lineNum++;
	    } else if (i == words.length - 1) {
		var myWidth = context.measureText(gFont, gFontSize, currentText);
		var xPos = align == 1 ? gBubbleXpos + gMargin : gBubbleXpos +gThreadWidth - myWidth - gMargin;
		var yPos = gBubbleYpos + gLineSpacing * gFontSize * lineNum + gFontSize * (lineNum + 1) + gMargin;
		context.drawText(gFont, gFontSize, xPos, yPos, currentText);
		maxWidth = (maxWidth > myWidth) ? maxWidth : myWidth;
		lineNum++;
	    }
	}
    var bubbleWidth = maxWidth + gMargin * 2;
    var bubbleHeight = gLineSpacing * gFontSize * (lineNum - 1) + lineNum * gFontSize + gMargin * 2;
    var bubbleXpos = align == 1 ? gBubbleXpos : gBubbleXpos + gThreadWidth - bubbleWidth;
    var bubbleYpos = gBubbleYpos;

    drawRRect(bubbleXpos, bubbleYpos, bubbleWidth, bubbleHeight);

    gBubbleYpos += bubbleHeight += gBubbleYMargin;
}


function drawRRect (x, y, w, h) 
{
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.fillStyle = "rgb(200,100,100)";
    context.strokeStyle = "rgb(0, 0, 0)";

    context.beginPath();
    context.moveTo(x + gRadius, y);

    context.lineTo(x + w - gRadius, y);
    context.arc(x + w - gRadius, y + gRadius, gRadius, - Math.PI / 2, 0, false);

    context.lineTo(x + w, y + h - gRadius);
    context.arc(x + w - gRadius, y + h - gRadius, gRadius, 0, Math.PI / 2, false);

    context.lineTo(x + gRadius, y + h);
    context.arc(x + gRadius, y + h - gRadius, gRadius, Math.PI / 2, Math.PI, false);

    context.lineTo(x, y + gRadius);
    context.arc(x + gRadius, y + gRadius, gRadius, Math.PI, (3 * Math.PI) / 2, false);

    context.closePath();
      
    //    context.fill(); 
    context.stroke();
}




